<template>
    <div :class="{'v2-main': true ,sd:  isSd}  ">
      <slot />
    </div>
</template>

<script>
export default {
  name: "v2Main",
  props:{
    isSd: {
      type: Boolean ,
      default: true
    }
  }
}
</script>

<style scoped>
  .v2-main{
    margin: auto;
    border-radius: 4px;
    box-sizing: border-box;
  }
  .v2-main.sd{
    box-shadow: 0px 0px  4px  #eee;
    border: 1px solid #ddd;
  }
  @media screen and (min-width: 768px){
    .v2-main{
      width: 100%;
    }
  }

  @media screen and (min-width: 992px){
    .v2-main{
      width: 970px;
    }
  }

  @media screen and (min-width: 1200px){
    .v2-main{
      width: 1170px;;
    }
  }

</style>
